import './style.scss'
import logo from '../../assets/images/logo.svg';
import vip from '../../assets/images/vip.png';
import { Input } from 'antd';
const { Search } = Input;
import type { GetProps } from 'antd';
type SearchProps = GetProps<typeof Input.Search>;
const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
import { useNavigate } from 'react-router-dom';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
const Top = () => {
    const menuArr = [
        '首页', 'AI Coding', '沸点', '课程', '直播', '活动', 'AI刷题', 'APP', '插件'
    ]
    const navigate = useNavigate();
    const goHome = () => navigate('/test')
    return (
        <>
            <div className="head">
                <div className="headMain">
                    <div className="headLeft">
                        <img src={logo} onClick={goHome} />
                        <div className="menu">
                            {menuArr.map((item, index) => (
                                <div key={index} className="item">
                                    {item}
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="headRight">
                        <Search placeholder="探索稀土掘金" onSearch={onSearch} enterButton />
                        <div className='btn'>
                            <div className="creatorCenter">
                                创作者中心
                            </div>
                            <div className="icon">
                                <CaretDownOutlined />
                                {/* <CaretUpOutlined /> */}
                            </div>
                        </div>
                        <div className="vip">
                            <img src={vip} alt="" />
                            <span>会员</span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}


export default function Home() {
    return (
        <>
            <div className="main">
                <Top></Top>
                <div className="body">
                    <div className="left">左侧</div>
                    <div className="middle">中间部分</div>
                    <div className="right">右侧</div>
                </div>
                <div className="footer"></div>
            </div>
        </>
    )
}